<template>
  <div>
    <!-- element 对话框自定义内容 start-->
    <!-- Form -->
    <el-dialog title="单台登记" :visible.sync="dialogFormVisible" width="60%" class="m-form">

      <el-steps :active="active" finish-status="success" simple
                style="margin-bottom: 20px;border-bottom: 1px solid #ddd;border-radius: 0">
        <el-step title="1、资产基本信息"></el-step>
        <el-step title="2、资产使用信息"></el-step>
      </el-steps>

      <el-form :model="form">
        <!--当前模态框 div 开始-->
        <div v-if="!sh">
          <el-form-item label="资产名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入资产的名称，如：台式电脑"></el-input>
          </el-form-item>
          <el-form-item label="设备型号" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入设备型号，如：联想启天M610"></el-input>
          </el-form-item>
          <el-form-item label="资产类型" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择资产类型">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!--当前模态框 div 结束-->

        <!--下一步 div 开始-->
        <div v-if="sh">
          <el-form-item label="资产编号" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入资产编号"></el-input>
          </el-form-item>
          <el-form-item label="管理部门" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择管理部门">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理人" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择管理人">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用人" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择使用人">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备型号" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入设备型号，如：联想启天M610"></el-input>
          </el-form-item>
          <el-form-item label="资产类型" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择资产类型">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!--下一步 div 结束-->

      </el-form>
      <router-view></router-view>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="next" v-if="!sh" round>下一步</el-button>
        <el-button type="primary" @click="sh = !sh;active = 1" v-if="sh" round>上一步</el-button>
        <el-button type="primary" @click="next" v-if="sh" round>保 存</el-button>
        <el-button @click="closeDialog" round>取 消</el-button>
      </div>
    </el-dialog>
    <!-- element 对话框自定义内容 start-->
  </div>
</template>

<script>
  import bus from '../../model/VueEvent';

  export default {
    name: "Modal",
    data() {
      return {
        active: 1,
        sh: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      };
    },
    mounted() {
      // 接受dialogFormVisible广播后的消息
      bus.$on("dialogFormVisible", val => {
        this.dialogFormVisible = val;
      })
    },
    watch: {
      dialogFormVisible(val) {
        console.log(val);
      }
    },
    methods: {
      closeDialog() {
        // 广播dialogFormVisible 属性为false
        bus.$emit("dialogFormVisible", false);
        this.active = 1;
      },
      next() {
        this.active = 2;
        this.sh = true;
      }
    }
  }
</script>

<style scoped>

  /*模态框样式*/
  .m-form /deep/ .el-dialog__body {
    /*
    m-form 为我们要修改组件类名的父级组件样式类名。。即使定义一个空的类名也没事。
    .el-dialog__body 为我们要修改组件的样式。
    */
    padding-top: 0px;
    border: 1px solid #ddd;
    margin: 0 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .m-form /deep/ .el-breadcrumb {
    height: 30px;
    line-height: 44px;
    height: 44px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }

  .m-form /deep/ .el-form {
    width: 50%;
  }
</style>
